import React, {Component} from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import {Carousel} from 'antd';
import './index.css';

class MSwiper extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 3,
            isOnly: true,
            style: {
                marginBottom: '10px'
            },
            dataset: [],
            layout: 0,
            isFull: '0',
            direction: 'row',
        }
    };

    constructor(props) {
        super(props);
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, dataset = [], layout, isFull, direction} = data;

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({
                    'mSwiper cmptEle': true,
                    'cmptEle_selected': selected,
                    'mSwiper_full': layout == 0 && isFull == 1
                })}
                style={style}
            >
                {
                    layout == 1 ?
                        <div>
                            {
                                dataset && dataset.length > 0 ?
                                    dataset.map(function (item, index) {
                                        return (
                                            <div className="mSwiper_noSwiper__item"
                                                 key={'mSwiper_noSwiper__item' + index}>
                                                <img src={item.imageUrl} className="mSwiper_noSwiper__img"/>
                                            </div>
                                        )
                                    })
                                    :
                                    <div className="mSwiperItem">
                                        <div className="mSwiperItem__empty">暂时没有数据哦</div>
                                    </div>
                            }
                        </div>
                        :
                        <Carousel autoplay dots={true} vertical={direction == 'column'}>
                            {
                                dataset && dataset.length > 0 ?
                                    dataset.map(function (item, index) {
                                        return (
                                            <div className="mSwiperItem" key={'mSwiperItem' + index}>
                                                <div className="mSwiperItem__inner">
                                                    <img src={item.imageUrl} className="mSwiperItem__inner__img"/>
                                                </div>
                                                <div style={{backgroundImage: 'url(' + item.imageUrl + ')'}}
                                                     className="mSwiperItem__img"></div>
                                            </div>
                                        );
                                    })
                                    :
                                    <div className="mSwiperItem">
                                        <div className="mSwiperItem__empty">暂时没有数据哦</div>
                                    </div>

                            }
                        </Carousel>
                }
            </div>
        );
    }
}

export default MSwiper;
